<!-- 投塘信息管理 -->
<template>
  <BaseMainSlot>
    <template v-slot:searchbox>
      <el-collapse v-model="activeName" accordion @change="handleChange">
        <el-collapse-item name="1">
          <template slot="title">
            <div class="select-btns search-btns" @click.stop="changeSelect()">
              <i class="el-icon-circle-check"></i>
              <p v-if="activeName === '1'">收起筛选</p>
              <p v-if="activeName === ''">展开筛选</p>
            </div>
          </template>
          <div class="search-btn search-btns" @click.stop="queryPageList(), searchPage()">
            <i class="el-icon-circle-check"></i>
            <p>查询</p>
          </div>
          <!-- <div class="select-box-content">
            <div class="select-box-content-name">批次编号</div>
            <el-input v-model="mnecode" clearable />
          </div> -->
          <div class="select-box-content">
            <div class="select-box-content-name">选择鱼塘</div>
            <el-select filterable clearable v-model="fishPondId" >
              <el-option v-for="(item, index) in fishPondList" :key="index" :label="item.pondName"
                :value="item.fishPondId" />
            </el-select>
          </div>
          <div class="select-box-content">
            <div class="select-box-content-name">养殖品种</div>
            <el-select filterable clearable v-model="fishVarietyId" >
              <el-option v-for="(item, index) in FishVarietyData" :key="index" :label="item.varietyName"
                :value="item.fishVarietyId" />
            </el-select>
          </div>
          <div class="select-box-content">
            <div class="select-box-content-name">封塘日期</div>
            <el-date-picker v-model="closePondDateTime" type="date" placeholder="选择日期" value-format="yyyy-MM-dd"
              clearable />
          </div>
        </el-collapse-item>
      </el-collapse>
    </template>
    <template v-slot:btnsBar>
    </template>
    <template v-slot:content>
      <div class="content-box1">
        <div class="pond-box">
          <div class="pond-item" v-for="(fishPondItem, fishPondIndex) in BOList" :key="fishPondIndex + 'fishPond'">
            <div class="pond-item-header">
              <div class="pond-item-header-title">{{ fishPondItem.pondName }}</div>
              <div class="pond-item-header-add" @click="add(fishPondItem)">添加投塘</div>
            </div>
            <div class="pond-item-body">
              <div class="pond-picture">
                <div class="pond-picture-body">
                  <img src="~@/assets/oth-img/鲩鱼.jpg" alt="">
                </div>
              </div>
              <div class="pond-batch">
                <div class="pond-batch-info" v-for="(batchInfoItem, batchInfoIndex) in fishPondItem.batchInfoList"
                  :key="batchInfoIndex + 'batchInfo'">
                  <div class="pond-batch-info-item-complete">
                    <span @click="completeInfo(batchInfoItem)">投塘详细信息</span>
                  </div>
                  <div class="pond-batch-info-item">
                    <div class="attName">批次编号: </div>
                    <div>{{ batchInfoItem.batchName }}</div>
                  </div>
                  <div class="pond-batch-info-item">
                    <div class="attName">是否封塘:</div>
                    <el-switch v-model="batchInfoItem.closePondFlag" :disabled="batchInfoItem.closePondFlag"
                      @change="closePond(batchInfoItem)" />
                  </div>
                  <div class="pond-batch-info-item">
                    <div class="attName">投塘次数: </div>
                    <div>{{ batchInfoItem.count }}次</div> 
                  </div>
                  <div class="pond-batch-info-item">
                    <div class="attName">投塘品种: </div>
                    <div>{{ batchInfoItem.varietyName }}</div>
                  </div>
                  <div class="pond-batch-info-item">
                    <div class="attName">总投塘条数: </div>
                    <div>{{ batchInfoItem.totalNum }}条</div>
                  </div>
                  <div class="pond-batch-info-item">
                    <div class="attName">总投塘重量: </div>
                    <div>{{ batchInfoItem.totalWeight }}斤</div>
                  </div>
                  <!-- <div class="pond-batch-info-item">投塘品种: {{batchInfoItem.varietyName}}</div>
                  <div class="pond-batch-info-item">总投塘条数: {{batchInfoItem.totalNum}}条</div>
                  <div class="pond-batch-info-item">总投塘重量: {{batchInfoItem.totalWeight}}斤</div> -->
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <Pagination :page-size="4" :current-page="currentPage" :total-size="totalSize"
        @changeCurrentPage="changeCurrentPage" />
      <AddEditDialog ref="addEditDialog" :now-chance-stau="nowChanceStau" :title-text="titleText"
        :edit-object="editObject" :fish-pond-list="fishPondList" :show.sync="showAddEditDialog" @closeDialog="closeDialog"
        @cancelDialog="cancel" />
      <CompleteInfoDialog ref="addEditDialog" :now-chance-stau="nowChanceStau" :complete-info-object="completeInfoObject"
        :show.sync="showCompleteInfoDialog" @closeDialog="closeDialog" @cancelDialog="cancel" />
    </template>
  </BaseMainSlot>
</template>

<script>
import ActionBar from "@/components/ActionBar";
import Pagination from "@/components/Pagination";
import BaseMainSlot from "@/components/BaseMainSlot/kong-new2.vue";
import AddEditDialog from "./components/add-edit-dialog.vue";
import CompleteInfoDialog from "./components/complete-info-dialog.vue";

import { mymixin } from "@/utils/mixin";
import { mapGetters } from 'vuex';

import FishVarietyApi from "@/api/basic-info-manage/fishVariety"
import FishPondApi from "@/api/basic-info-manage/fishPond"
import BatchMangeApi from "@/api/batch-mange"
export default {
  name: 'BatchCreate',
  components: { ActionBar, Pagination, BaseMainSlot, AddEditDialog, CompleteInfoDialog },
  mixins: [mymixin],
  data () {
    return {
      // 查询条件 start ---
      mnecode: "",//批次编号
      fishPondId: "",//养殖鱼塘ID
      fishVarietyId: "",//养殖品种ID
      closePondDateTime: "",//封塘时间
      fishPondList: [],//全部鱼塘
      FishVarietyData: [],//全部品种
      // 查询条件 end ---
      activeName: '',
      BOList: [],// 表格数据
      checkedIdList: [],
      completeInfoObject: {},
      showCompleteInfoDialog: false
    };
  },
  computed: {
    ...mapGetters({
      judgePermission: "permission/judgePermission"
    })
  },
  watch: {},
  created () {
    this.queryPageList();
    this.queryFishVariety()
    this.queryFishPond()
  },
  mounted () {
  },
  methods: {
    searchPage () {
      this.currentPage = 1
      this.queryPageList();
      setTimeout(() => {
        this.queryPageList();
      }, 200);
    },
    async queryPageList () {
      const params = {
        page: this.currentPage,
        size: 4,
        entity: {}
      };
      if (this.mnecode) params.entity.mnecode = this.mnecode;
      if (this.fishPondId) params.entity.fishPondId = this.fishPondId;
      if (this.fishVarietyId) params.entity.fishVarietyId = this.fishVarietyId;
      if (this.closePondDateTime) {
        params.entity.closePondDateTimeStart = this.closePondDateTime + ' 00:00:00';
        params.entity.closePondDateTimeEnd = this.closePondDateTime + ' 23:59:59';
      }
      const res = await BatchMangeApi.queryPondPageByCondition(params)
      if (res.success === true) {
        let data = res.data || {};
        this.totalSize = data.totalElements;
        // 赋值数组
        this.BOList = data.content;
        // this.BOList.forEach(item => {
        //   InputPondApi.queryBatchByFishPondId({pondId:item.fishPondId}).then(res=>{
        //     this.$set(item,"batchList", res.data)
        //   })
        // });
      }
    },
    //查询可选鱼类品种
    queryFishVariety () {
      let params = {
        page: 1,
        size: 1000,
      }
      FishVarietyApi.queryPageByCondition(params).then(res => {
        this.FishVarietyData = res.data.content;
      })
    },
    //查询可选鱼塘
    queryFishPond () {
      let params = {
        page: 1,
        size: 1000,
      }
      FishPondApi.queryPageByCondition(params).then(res => {
        this.fishPondList = res.data.content;
      })
    },
    // 封塘操作
    closePond (data) {
      if (data.count<=0) {
        this.$message('当前还未投塘~')
        data.closePondFlag = false;
        return
      }
      this.$confirm("该操作不可逆, 是否确认封塘?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        
      }).then(() => {
        const d = new Date()
        const nowDate = this.formatDateTimeMHS(d)
        let params = {
          closePondDateTime: nowDate,
          productionBatchIdList: [data.productionBatchId]
        }
        BatchMangeApi.closePond(params).then(res => {
          if (res.success === true) {
            this.$message.success("封塘成功!");
            this.queryPageList();
          }
        })
      }).catch(() => {
        data.closePondFlag = false;
        this.$message({
          type: "info",
          message: "已取消封塘"
        });
      });
    },
    // 点击详情
    completeInfo (row) {
      if (row.productionBatchId) {
        this.completeInfoObject = JSON.parse(JSON.stringify(row));
        this.showCompleteInfoDialog = true;
      }
    },
    changeCurrentPage (currentPage) {
      this.currentPage = currentPage;
      this.queryPageList();
    },
    // 添加
    add (fishPondItem) {
      this.editObject = JSON.parse(JSON.stringify(fishPondItem));
      this.nowChanceStau = 'add'
      this.titleText = "添加"
      this.addActive = false;
      this.delActive = false;
      this.showAddEditDialog = true
    },
    // 取消
    cancel () {
      this.nowChanceStau = '';
      this.titleText = ''
      this.editObject = {}
      this.showAddEditDialog = false
      this.showCompleteInfoDialog = false;
      this.queryPageList();
    },
    closeDialog () {
      if (this.showAddEditDialog === true || this.showReasonDialog === true) {
        this.queryPageList()
      }
      this.showAddEditDialog = false
      this.nowChanceStau = '';
      this.titleText = ''
      this.editObject = {}
    }
  }
};
</script>

<style lang="scss" scoped>
.pagination {
  position: absolute;
  right: 0px;
  bottom: 20px;
}

.content-box1 {
  width: 100%;
  height: 100%;

  .pond-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    height: 90%;
    color: #000;
    margin-top: 15px;
    padding: 10px;
    // border: 1px solid blue;
    overflow: auto;
  }

  .pond-item {
    width: 49.5%;
    height: 360px;
    background-color: #fff;
    border-radius: 5px;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    box-shadow: 0px 0px 6px 1px rgba(4, 128, 251, 0.5);

    .pond-item-header {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 0 10px;
      color: #fff;
      width: 100%;
      height: 46px;
      background-color: #D6EBFE;

      .pond-item-header-title {
        font-size: 16px;
        font-weight: 600;
        color: #0480FB;
      }

      .pond-item-header-add {
        position: absolute;
        right: 20px;
        width: 81px;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 30px;
        border-radius: 5px;
        border: 1px solid #0480FB;
        font-size: 16px;
        color: #0480FB;
        cursor: pointer;
      }
    }

    .pond-item-body {
      height: calc(100% - 56px);
      margin: 10px 10px;
      display: flex;

      .pond-picture {
        height: 100%;

        .pond-picture-body {
          height: 100%;

          img {
            width: 100%;
            height: 100%;
          }
        }
      }

      .pond-batch {
        width: calc(100% - 320px);
        min-width: 360px;
        height: 100%;
        overflow-y: auto;

        .batch-operate {
          height: 50px;
          display: flex;

          span {
            height: 26px;
            margin: 5px 10px;
            padding: 3px 5px;
            border-radius: 3px;
            border: 1px solid #ccc;
            cursor: pointer;
          }
        }

        .pond-batch-info {
          position: relative;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          flex-wrap: wrap;
          background-color: #EDF6FF;
          border-radius: 5px;
          width: calc(100% - 20px);
          height: 170px;
          margin: 0 10px 10px;
          padding: 0 5px;
          align-items: flex-start;

          .pond-batch-info-item-complete {
            padding-top: 5px;
            width: 100%;
            text-align: right;

            span {
              display: inline-block;
              height: 100%;
              // position: absolute;
              right: 10px;
              padding: 0 4px;
              line-height: 30px;
              background-color: #0480FB;
              color: #fff;
              font-size: 16px;
              border: 1px solid #0480FB;
              border-radius: 3px;
              cursor: pointer;
            }
          }

          .pond-batch-info-item {
            line-height: 24px;
            width: 50%;
            display: flex;
            flex-flow: wrap;
            align-items: center;

            .attName {
              color: #999999;
              min-width: 80px;
              text-align: right;
              padding-right: 10px;
              box-sizing: border-box;
            }
          }
        }
      }
    }
  }
}
</style>
